<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>
          <navigation />
        </span>
      </div>

      <div class="all">
        <div class="left">
          <div
            class="btn_bottom"
            :class="[isActive == 0 ? 'active' : '']"
            @click="getData(0)"
          >
            全部文件
          </div>
          <div
            class="btn_bottom"
            :class="[isActive == 1 ? 'active' : '']"
            @click="getData(1)"
          >
            目标任务进度
          </div>
          <div
            class="btn_bottom"
            :class="[isActive == 2 ? 'active' : '']"
            @click="getData(2)"
          >
            考核评分
          </div>
          <div
            class="btn_bottom"
            :class="[isActive == 3 ? 'active' : '']"
            @click="getData(3)"
          >
            负面清单
          </div>
          <div
            class="btn_bottom"
            :class="[isActive == 4 ? 'active' : '']"
            @click="getData(4)"
          >
            日常工作台账
          </div>
          <div
            class="btn_bottom"
            :class="[isActive == 5 ? 'active' : '']"
            @click="getData(5)"
          >
            加减分项
          </div>
          <div
            class="btn_bottom"
            :class="[isActive == 6 ? 'active' : '']"
            @click="getData(6)"
          >
            各方面评价
          </div>
        </div>
        <div class="right">
          <div class="searchTop">
            <el-input
              placeholder="请输入搜索内容"
              v-model="input2"
              size="medium"
              class="inputs"
            >
            </el-input>
            <el-button type="primary" size="medium" style="margin-left:20px;" @click="getData(isActive,input2)" >查询</el-button>
          </div>
          <el-scrollbar class="page-component__scroll" style="height:100%">
            <div style="height:630px;">
              <el-table
                :data="tableData"
                height="600"
                border
                style="width: 100%"
                :header-cell-style="{ background: '#f5f5f5' }"
              >
                <!-- <el-table-column align="center" prop="fltName" label="文件类型"></el-table-column> -->
                <el-table-column align="center" prop="file" label="文件名">
                  <template slot-scope="scope">
                    <a :href="uploadUrls + '/' + scope.row.file">{{
                      fileLists(scope.row.file)
                    }}</a>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="addTime"
                  label="上传时间"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="userName"
                  label="上传人"
                ></el-table-column>
                <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                    <el-button
                      @click="removePermiss(scope.row)"
                      type="danger"
                      size="small"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-scrollbar>
          <el-pagination
            background
            style="float:right"
            layout="prev, pager, next"
            :page-size="pagesize"
            :current-page="currentPage"
            :total="total"
            @current-change="pageChange"
          ></el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import configJson from "../../api/config";
export default {
  data() {
    return {
      tableData: [],
      uploadUrl: configJson.API_URL + "fileController/uploadFile",
      uploadUrls: configJson.API_URL + "fileController",
      fileList: [],
      pagesize: 10,
      currentPage: 1,
      total: 0,
      files: "",
      fileType: "",
      fileTypeList: [],
      isActive: 1,
      input2:'',
    };
  },
  mounted() {
    this.getData("0");
    this.getFileType();
  },
  methods: {
    getData(id,text) {
      this.isActive = id;
      this.$axios
        .post(
          `/fileController/getListByPage/${this.currentPage}/${this.pagesize}`,
          {
            pageNum: this.currentPage,
            pageSize: this.pagesiz,
            type: id,
            file:text,
            classifyType:1
          }
        )
        .then(res => {
          if (res.code == 200) {
            this.tableData = res.data.list;
            this.total = res.data.total;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    fileLists(arr) {
      let str = arr.split("/");
      return str.pop();
    },
    successFile(response, file, fileList) {
      if (response.code == 200) {
        let fileUrlStr = this.uploadUrl.split("/");
        let fileRemoveChl = fileUrlStr.slice(0, fileUrlStr.length - 1);
        this.fileUrlEnd = fileRemoveChl.join("/");
        this.fileName = this.fileUrlEnd + "/" + response.data;
        let obj = {
          file: response.data,
          type: this.fileType
        };
        this.$axios
          .post("/fileController/addFile", obj)
          .then(res => {
            if (res.code == 200) {
              console.log(res.data);
              this.$message.success("上传成功");
              this.getData();
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    handleDealFileRemove(file, fileList) {
      this.fileName = "";
    },
    pageChange(page) {
      this.currentPage = page;
      this.getData();
    },
    removePermiss(data) {
      this.$confirm("此操作将删除该区域, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .post("/fileController/deleteFileLib", { id: data.id }, 2)
            .then(res => {
              if (res.code == 200) {
                this.$message.success("删除成功");
                this.getData();
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(e => e);
    },
    // 获取文件类别
    getFileType() {
      this.$axios
        .post("fileLibTypeController/getList")
        .then(res => {
          if (res.code == 200) {
            this.fileTypeList = res.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style scoped>
.rightHeader {
  display: flex;
  justify-content: center;
  align-items: center;
}
.clearfix {
  display: flex;
  justify-content: space-between;
}
.all {
  width: 100%;
  min-width: 1300px;
  height: 700px;
}
.left {
  float: left;
  width: 16%;
  min-width: 200px;
  padding-left: 2%;
  height: 100%;
}
.right {
  float: right;
  width: 84%;
  min-width: 600px;
  height: 100%;
  background: #fff;
}
.btn_bottom {
  width: 160px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  background: #66b1ff;
  font-size: 16px;
  margin-bottom: 10px;
  color: #fff;
  cursor: pointer;
}
.active {
  background: #67c23a;
}
.searchTop{
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.searchTop>b{
  font-size: 16px;
  font-weight: 500;
}
.searchTop>.inputs{
  width:200px;

}
</style>
